<template>
  <div class="transfer">
    <div class="top">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="top-img1"
        @click="goback"
      />
      <p class="top-p">{{ $t("common.huazhuan") }}</p>
    </div>
    <div class="center">
      <div class="centera">
        <span>{{ $t("common.cong") }}</span>
        <p>{{ zh.name }}</p>
        <img src="../../assets/images/hz1.png" alt="" />
      </div>
      <div class="centerb">
        <img src="../../assets/images/hz2.png" alt="" @click="change" />
      </div>
      <div class="centerc">
        <span>{{ $t("common.dao") }}</span>
        <p>{{ zh.name1 }}</p>
        <img src="../../assets/images/hz1.png" alt="" />
      </div>
    </div>
    <div class="content">
      <img src="../../assets/images/hz3.png" alt="" />
      <p>USDT</p>
    </div>
    <div class="contenta">{{ $t("common.shuliang") }}</div>
    <div class="contentb">
      <input v-model="amount" type="number" placeholder=""  @input="amount=$formatDecimal(amount,2)"/>
      <span>USDT</span>
      <p @click="amount = sumPrice">{{ $t("common.quanbu") }}</p>
    </div>
    <div class="contentc">
      <p class="p1">{{ $t("common.keyongzi") }}</p>
      <p class="p2">{{ sumPrice }} USDT</p>
    </div>
    <van-button type="info" @click="submit" :class="+amount<=0 && 'hui'">{{
      $t("common.querenhuazhuan")
    }}</van-button>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import { createSocket } from "../../common/_websocket";
export default {
  data() {
    return {
      zhIndex: 1,
      newWebSocket: createSocket(),
      amount: "",
      sumPrice: 0,
      zh: {
        name: this.$t("common.zijinzhanghu"),
        name1: this.$t("common.heyuezhanghu"),
      },
      value: "",
      // buhefa: this.$t('common.buhefa'),
      // huazhuan: this.$t('common.huazhuan'),
      // huazhuancheng: this.$t('common.huazhuancheng'),
      // shanchu: this.$t('common.shanchu'),
      // message: this.$t('common.message'),
    };
  },
  destroyed() {
    this.newWebSocket.close();
  },
  deactivated(){
    this.newWebSocket.close();
  },
  activated(){
    this.amount = ''
    this.zhIndex = localStorage.getItem("zh");
    if (this.zhIndex == 2) {
      this.zh = {
        name: this.$t("common.heyuezhanghu"),
        name1: this.$t("common.zijinzhanghu"),
      };
    }else{
      this.zh = {
        name: this.$t("common.zijinzhanghu"),
        name1: this.$t("common.heyuezhanghu"),
      };
    }
    this.socketWalletConnect();
  },
  methods: {
    socketWalletConnect() {
      this.newWebSocket.init({
        url: `/wallet/ws/info`,
        onopen: (msg, data) => {
          this.newWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe",
              params: ["mergeWallet", ""],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "mergeWallet") {
          if (this.zhIndex == 1) {
              let sum = 0;
              try {
                zdata.data.capitalAccount.assetList.forEach((v) => {
                  sum += +v.available;
                });
                this.sumPrice = this.$myfixedNum(+sum,2);
              } catch (error) {
                //
              }
          } else if (this.zhIndex == 2) {
            this.sumPrice = this.$myfixedNum((+zdata.data.contractAccount.available),2);
          }
        }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    goback() {
      this.$router.go("-1");
    },
    change() {
      if (this.zh.name == this.$t("common.heyuezhanghu")) {
        this.zh.name = this.$t("common.zijinzhanghu");
        this.zh.name1 = this.$t("common.heyuezhanghu");
        this.zhIndex = 1;
      } else {
        this.zh.name = this.$t("common.heyuezhanghu");
        this.zh.name1 = this.$t("common.zijinzhanghu");
        this.zhIndex = 2;
      }
    },
    submit() {
      console.log(this.amount, this.sumPrice);
      if (!this.amount || +this.amount > +this.sumPrice) {
        // Toast(this.$t('common.buhefa'));
        return;
      }
      Dialog.confirm({
        title: this.$t('common.huazhuan'),
        message: this.$t('common.message'),
        theme: "round-button",
      })
        .then(async () => {
          const ret = await this.$http({
            url: "/wallet/transferrecord/transfer",
            method: "post",
            data: {
              currency: 1,
              quantity: this.amount,
              type: this.zh.name == this.$t("common.zijinzhanghu") ? 1 : 2,
            },
          });
          if (ret.data.code === 0) {
            Toast(this.$t('common.huazhuancheng'));
            setTimeout(() => {
              this.$router.push("/capital");
            }, 1500);
          }
        })
        .catch(() => {
          //
        });
    },

    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast(this.$t('common.shanchu'));
    },
  },
};
</script>

<style scoped lang="scss">
.transfer {
  margin: 0;
  padding: 0;
  background-color: #090A1B;
  height: 215.53vw;
  .top {
    height: 11.73vw;
    width: 100vw;
    background-color: #090A1B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //font-family: Microsoft Yahei;
    position: relative;
    .top-img1 {
      height: 5.3vw;
      width: 5.3vw;
      margin-left: 2.4vw;
    }
    .top-p {
      font-size: 4.8vw;
      color: rgba(255, 255, 255, 100);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .top-img2 {
      height: 5.3vw;
      width: 5.3vw;
      margin-right: 3.2vw;
    }
  }
  .center {
    width: 93.33vw;
    height: 25.06vw;
    line-height: 5.33vw;
    border-radius: 0.53vw;
    background-color: rgba(45, 47, 59, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 3.73vw;
    text-align: center;
    //font-family: Arial;
    margin-top: 5.86vw;
    margin-left: 3.46vw;
    .centera {
      height: 9.86vw;
      display: flex;
      span {
        position: relative;
        top: 3.73vw;
        left: 3.2vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
      }
      p {
        position: relative;
        top: 3.73vw;
        left: 7.8vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
      }
      img {
        width: 3.2vw;
        height: 3.2vw;
        position: relative;
        top: 4.8vw;
        left: 12.8vw;
      }
    }
    .centerb {
      height: 5.33vw;
      img {
        width: 5.33vw;
        height: 5.33vw;
        position: relative;
        right: -39.46vw;
      }
    }
    .centerc {
      height: 9.86vw;
      display: flex;
      span {
        position: relative;
        top: 0.8vw;
        left: 3.2vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
      }
      p {
        position: relative;
        top: 0.8vw;
        left: 7.8vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
      }
      img {
        width: 3.2vw;
        height: 3.2vw;
        position: relative;
        top: 1.8vw;
        left: 12.8vw;
      }
    }
  }
  .content {
    margin-top: 6.93vw;
    margin-left: 3.46vw;
    width: 93.33vw;
    height: 9.6vw;
    line-height: 5.3vw;
    border-radius: 0.53vw;
    background-color: rgba(45, 47, 59, 100);
    display: flex;
    justify-content: flex-start;
    img {
      width: 3.73vw;
      height: 3.73vw;
      position: relative;
      top: 2.93vw;
      left: 2.9vw;
    }
    p {
      width: 10.13vw;
      height: 5.3vw;
      color: rgba(214, 214, 214, 100);
      font-size: 3.73vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 2.4vw;
      left: 4.8vw;
      font-weight: 600;
    }
  }
  .contenta {
    // width: 6.4vw;
    height: 4.5vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.2vw;
    text-align: left;
    font-family: PingFangSC-regular;
    margin-top: 6.9vw;
    margin-left: 3.4vw;
  }
  .contentb {
    margin-top: 1.8vw;
    width: 93.33vw;
    height: 9.6vw;
    border-radius: 0.53vw;
    background-color: rgba(45, 47, 59, 100);
    margin-left: 3.46vw;
    display: flex;
    justify-content: space-between;
    input {
      width: 64vw;
      background-color: rgba(45, 47, 59, 100);
      border-width: 0;
      font-size: 3.73vw;
      position: relative;
      left: 3.6vw;
      font-weight: 600;
    }
    input::-webkit-input-placeholder {
      color: rgba(79, 82, 93, 100);
      font-weight: 500;
    }
    span {
      color: rgba(79, 82, 93, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 3.2vw;
    }
    p {
      color: rgba(252, 218, 94, 100);
      font-size: 3.46vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 2.8vw;
      right: 2.93vw;
    }
  }
  .contentc {
    margin-top: 3.2vw;
    .p1 {
      height: 4.53vw;
      color: rgba(135, 139, 151, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 2.93vw;
      left: 3.46vw;
    }
    .p2 {
      // width: 25.33vw;
      height: 4.53vw;
      color: rgba(214, 214, 214, 100);
      font-size: 3.2vw;
      text-align: right;
      font-family: PingFangSC-regular;
      float: right;
      position: relative;
      right: 3.2vw;
      top: -0.5vw;
    }
  }
  .van-button {
    width: 93.33vw;
    height: 10.66vw;
    line-height: 5.3vw;
    border-radius: 1.3vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.7vw;
    text-align: center;
    //font-family: Arial;
    top: 76.66vw;
  }
  .oneflatshow {
    width: 75.2vw;
    // height: 68.2vw;
    padding-bottom: 0;

    .content {
      width: 64vw;
      margin: 0 auto 11.5vw;
      font-size: 3.2vw;
      line-height: 5.6vw;
      text-align: left;

      span {
        display: block;
        font-size: 14px;
      }
    }
    p{
      width: 60vw;
      margin: 4vw auto 0;
      text-align: left;
      line-height: 6.4vw;
      letter-spacing: 0.266vw;
    }
    ::v-deep .van-dialog__footer {
      display: none;
    }

  }
}
.hui{
  background-color: #4d4e58 !important;
  border-color: #4d4e58;
  color:#8992AE !important;
}
</style>
